<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
	<script src='resources/js/jquery-1.8.3.min.js'></script>
	<script src='resources/js/jquery.elevatezoom.js'></script>
	
</head>
<body>
<img id="zoom_01" src='resources/images/small/image1.png' data-zoom-image="resources/images/large/image1.jpg"/>
 <img id="zoom_02" src='resources/images/small/image2.png' data-zoom-image="resources/images/large/image2.jpg"/>
<img id="zoom_03" src='resources/images/small/image3.png' data-zoom-image="resources/images/large/image3.jpg"/>
<img id="zoom_04" src='resources/images/small/image4.png' data-zoom-image="resources/images/large/image4.jpg"/>
<script>
		$('#zoom_01').elevateZoom({
			zoomType : "inner",
			cursor : "crosshair",
			zoomWindowFadeIn : 500,
			zoomWindowFadeOut : 750
		});
		$('#zoom_02').elevateZoom({
			zoomType : "inner",
			cursor : "crosshair",
			zoomWindowFadeIn : 500,
			zoomWindowFadeOut : 750
		});
		$('#zoom_03').elevateZoom({
			zoomType : "inner",
			cursor : "crosshair",
			zoomWindowFadeIn : 500,
			zoomWindowFadeOut : 750
		});
		$('#zoom_04').elevateZoom({
			zoomType : "inner",
			cursor : "crosshair",
			zoomWindowFadeIn : 500,
			zoomWindowFadeOut : 750
		});
	</script> 
</body>
</html>